<template>
  <ToolboxWindow
    :show="isOpening"
    @close="handleClose"
    :width="480"
    :isLoading="isLoading"
  >
    <template #title>
      <h4 style="display: flex; align-items: center">
        <el-icon>
          <Notebook />
        </el-icon>
        <span style="padding-left: 8px">返航备降记录</span>
      </h4>
    </template>
    <div class="root-container">
      <div class="create-container">
        <CreateField />
      </div>
      <div class="list-container">
        <CurrentList />
      </div>
    </div>
  </ToolboxWindow>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import useJournalStore from "@/store/journal.js";
import ToolboxWindow from "@/components/ToolboxWindow/index.vue";
import CreateField from "./CreateField.vue";
import CurrentList from "./CurrentList.vue";

const journalStore = useJournalStore();

const isOpening = computed(() => journalStore.diversionShareStatus.showToolbox);

const isLoading = computed(
  () => journalStore.diversionShareStatus.isToolboxLoading
);

const handleClose = () => {
  journalStore.diversionShareStatus.showToolbox = false;
};
</script>
